// $(function () {
//     // ---------------------------------------------------------------------------------
//     //  技术栈  ：　1.antv里的G6引擎（svg渲染 +　自定义dom节点）制作基本ui样式。
//     //             2.svg渲染规定不能使用G6中内置的事件api，要在创建自定义dom节点时，在标签的行内加入事件信息。
//     //             3.行内事件不能满足交互要求，但是外部能获取到自定义dom元素，但是不能对其添加事件。（解决方法：给svg标签添加事件，使用事件委托到具体的html元素就可以了）
//     // --------------------------------------------------------------------------------
//     // 实例化 grid 插件
//     const grid = new G6.Grid(); //网格插件
//     const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
//         return [
//             ['M', x - r, y - r],
//             ['a', r, r, 0, 1, 0, r * 2, 0],
//             ['a', r, r, 0, 1, 0, -r * 2, 0],
//             ['M', x + 2 - r, y - r],
//             ['L', x + r - 2, y - r],
//             ['M', x, y - 2 * r + 2],
//             ['L', x, y - 2],
//         ];
//     };
    
//     G6.registerNode(
//         'icon-node', {
//             options: {

//             },
//             draw(cfg, group) {
//                 const styles = this.getShapeStyle(cfg);
//                 const {
//                     labelCfg = {}
//                 } = cfg;

//                 const w = styles.width;
//                 const h = styles.height;
//                 const keyShape = group.addShape('dom', {
//                     attrs: {
//                         ...styles,
//                         x: -w / 2,
//                         y: -h / 2,
//                         html: `<section id=${cfg.id} style='user-select: none;width:100%;height:100%;border:1px solid rgba(4, 0, 0, 0.14);background:#FFF;border-radius: 10px;box-sizing: border-box;font-size:12px;color:#999;text-align:center;line-height:38px'>${cfg.label}</section>`
//                     },
//                     capture: true,
//                 });
//                 // 移入加号显示的操作栏
//                 group.addShape('dom', {
//                     attrs: {
//                         width: 110,
//                         height: 50,
//                         x: 40,
//                         y: 20,
//                         radius: 10,
//                         // 传入 DOM 的 htmldisplay:none;
//                         html: `<div id="showOpt"
//                                         style="width: 100%;height:100%;background: #FFFFFF;display:none;box-shadow: 0px 5px 17px 0px rgba(4, 0, 0, 0.14);border-radius: 5px;text-indent: 15px;">
//                                         <p id="createModule" style="margin: 0;padding: 0;border-bottom: 1px solid #E6E6E6;line-height: 26px;font-size: 10px;border-radius: 5px;">
//                                             创建剧情模块</p>
//                                         <p id="delModule" style="margin: 0;padding: 0;line-height: 26px;font-size: 10px;">删除剧情模块</p>
//                                     </div>`,
//                     },
//                     capture: true,
//                     draggable: true,
//                     name: "htmlOPT",
//                 });
//                 // 加号
//                 group.addShape('dom', {
//                     attrs: {
//                         width: 20,
//                         height: 20,
//                         x: 50,
//                         y: -10,
//                         html: ` <div id="addFu" style="width: 15px;height: 15px;background: #FFFFFF url(./images/lanjia.png) no-repeat 50% 50%;border:2px solid #FFF;border-radius: 50%;"></div>`,
//                     },
//                     capture: true,
//                     draggable: true,
//                     name: 'add-item',
//                 });
//                 // console.log('cfg.leftIcon', cfg.leftIcon);
//                 if (cfg.imgUrl) {
//                     const {
//                         imgUrl
//                     } = cfg;
//                     group.addShape('image', {
//                         attrs: {
//                             x: 1 - w / 2,
//                             y: 1 - h / 2,
//                             width: 38,
//                             height: 40,
//                             radius: 10,
//                             img: imgUrl,
//                         },
//                         capture: true,
//                         name: 'image-shape',
//                     });
//                 }
//                 return keyShape;
//             },
//         },
//         'rect',
//     );

//     const defaultLayout = {
//         type: 'compactBox',
//         direction: 'LR',
//         getId: function getId(d) {
//             return d.id;
//         },
//         getHeight: function getHeight() {
//             return 16;
//         },
//         getWidth: function getWidth() {
//             return 16;
//         },
//         getVGap: function getVGap() {
//             return 40;
//         },
//         getHGap: function getHGap() {
//             return 70;
//         },
//     };

//     const container = document.getElementById('container');
//     const width = container.scrollWidth;
//     const height = container.scrollHeight || 500;
//     // console.log(width,height)
//     // const minimap = new G6.Minimap({
//     //     size: [150, 100],
//     // });
//     const graph = new G6.TreeGraph({
//         container: 'container',
//         width,
//         height,
//         renderer: "svg",
//         // linkCenter: true,
//         // plugins: [minimap, grid],
//         plugins: [grid],
//         modes: {
//             default: ['drag-canvas', 'zoom-canvas'],
//         },
//         defaultNode: {
//             // type: 'modelRect', //节点类型
//             type: 'icon-node',
//             size: [120, 40],
//         },
//         defaultEdge: {
//             type: 'line',
//             style: {
//                 stroke: '#999999',
//             },
//         },
//         nodeStateStyles: {
//             hover: {
//                 stroke: '#1890ff',
//                 lineWidth: 2,
//             },
//         },
//         edgeStateStyles: {
//             hover: {
//                 stroke: '#1890ff',
//                 lineWidth: 2,
//             },
//         },
//         layout: defaultLayout,
//     });
//     // graph.fitView();
//     graph.setMinZoom(0.5); //最小允许缩放比例
//     graph.setMaxZoom(1.5); //最大允许缩放比例
//     graph.data(data);
//     graph.render();
//     graph.fitCenter(); //（记住渲染后加入此方法）图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
//     // svg自定义dom节点：  1. dom节点不能使用节点/边这些g6内置api,需要使用原生DOM事件（即行内事件，外部添加不生效）；   2.外部可以获取到元素信息，但是事件不能触发，这里用到事件委托可以解决
//     // $("div#addFu").click(function () {     //不生效
//     //     console.log(11);
//     // })
//     $("svg").on("mouseenter", "div#addFu", function (e) {
//         let optTip = $(this).parent().parent()
//         optTip.find("div#showOpt").toggle(300);
//         $("svg").find("section").css("border", "1px solid rgba(4, 0, 0, 0.14)")
//         $(this).parent().parent().find("section").css("border", "2px solid #05A6F9"); //当移入加号时，左侧长方形边框换为  2px 蓝色
//         let id = $(this).parent().parent().find("section").attr("id");
//         // console.log(id)
//         if (id === 'root') { //当id为root时，表示此时操作的节点是根节点，则不要删除节点的样式
//             $(this).parent().parent().find("#delModule").css("display", "none");
//         }
//         let info = graph.findDataById(id); //g6api  通过数据中某一个数据的id 过去数据本身
//         if (!info.children || info.children.length === 0) {
//             info.children = [];
//         }
//         // console.log(data)
//         if (info.children.length >= 4) { //如果这个元素分支下已有4个子分支，咋不支持创建新的
//             optTip.find("p#createModule").css({
//                 cursor: "not-allowed",
//             });
//             optTip.find("p#createModule").hover(function () {
//                 $(this).css("color", "#999"); //hover时效果
//             }, function () {
//                 $(this).css({
//                     cursor: "not-allowed",
//                 });
//             });
//         }
//     }).on("click", "p#createModule", function (ev) {
//         let id = $(this).parent().parent().parent().find("section").attr("id");
//         $(this).parent().parent().find("div#showOpt").hide(300);
//         let info = graph.findDataById(id);
//         // if (!info.children) {
//         //     info.children = [];
//         // }
//         // console.log(info.children.length)
//         if (info.children.length < 4) { //分支超过4个不可再创建
//             const randNum = `n-${Math.random()}`;
//             info.children.push({
//                 id: randNum,
//                 label: "拖拽素材至此",
//             })
//             graph.updateChild(info, id);
//         }
//         graph.fitCenter(); // 创建新的分支后，svg宽度变大，然后再调用此方法，会再次居中
//     }).on("click", "p#delModule", function (ev) {
//         let id = $(this).parent().parent().parent().find("section").attr("id");
//         $(this).parent().parent().find("div#showOpt").hide(300);
//         graph.removeChild(id);
//         // console.log(data);
//     }).on("click", "section", function (ev) {
//         $("svg").find("section").css("border", "1px solid rgba(4, 0, 0, 0.14)")
//         $(this).css("border", "2px solid #05A6F9");
//         $(".storyLineOpt").show(300);
//     });
//     // .on("mouseleave", "div#addFu", function (e) {
//     //     $(this).parent().parent().find("div#showOpt").hide(300);
//     // });
//     if (typeof window !== 'undefined') {
//         window.onresize = () => {
//             if (!graph || graph.get('destroyed')) return;
//             if (!container || !container.scrollWidth || !container.scrollHeight) return;
//             graph.changeSize(container.scrollWidth, container.scrollHeight);
//         };
//     }
// })